<template>
	<div>
		<a-button @click="showModal">保存报表</a-button>
		<a-modal v-model="visible" :footer="null">
			<a-tabs default-active-key="1">
				<a-tab-pane key="1" tab="添加到我到看板">
					<a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
						<a-form-model-item has-feedback label="看板名称">
							<a-input autocomplete="off" placeholder="请输入看板名称" />
						</a-form-model-item>
						<a-form-model-item has-feedback label="添加至文件夹">
							<a-select placeholder="添加文件夹">
								<a-select-option value="1">测试事件1</a-select-option>
								<a-select-option value="2">测试事件2</a-select-option>
							</a-select>
						</a-form-model-item>

						<a-form-model-item
							:label-col="{ span: 0 }"
							:wrapper-col="{ span: 24 }"
							style="text-align: right"
						>
							<a-button key="cancal" style="margin-right: 8px" @click="handleCancel">取消</a-button>
							<a-button key="submit" type="primary" @click="handleSubmit">确认</a-button>
						</a-form-model-item>
					</a-form-model>
				</a-tab-pane>
				<a-tab-pane key="2" tab="保存报表">
					<a-form-model
						ref="ruleForm"
						:model="form"
						:label-col="{ span: 5 }"
						:wrapper-col="{ span: 19 }"
					>
						<a-form-model-item label="报表名称">
							<a-input v-model="form.name" placeholder="请输入报表名称" />
						</a-form-model-item>

						<a-form-model-item has-feedback label="报表备注">
							<a-input v-model="form.desc" type="textarea" placeholder="工作台/我到报表" />
						</a-form-model-item>
						<a-form-model-item
							:label-col="{ span: 0 }"
							:wrapper-col="{ span: 24 }"
							style="text-align: right"
						>
							<a-button key="back" style="margin-right: 8px" @click="handleCancel">取消</a-button>
							<a-button key="submit" type="primary" @click="handleSubmit">确认</a-button>
							<!--  :loading="loading" -->
						</a-form-model-item>
					</a-form-model>
				</a-tab-pane>
			</a-tabs>
		</a-modal>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
	name: '',
	components: {}
})
export default class extends Vue {
	// @Prop() visible!: boolean
	// private isShowSaveReport = false
	private visible = false
	private form = {
		name: '',
		desc: ''
	}
	private showModal() {
		this.visible = true
	}
	private handleCancel() {
		this.visible = false
	}

	private handleSubmit() {
		console.log('submit!', this.form)
	}
}
</script>
